<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>太阳系黄道十二宫</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: #1c023f;
        color: white;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }

      * {
        box-sizing: border-box;
      }

      canvas {
        display: block;
      }

      #info {
        position: absolute;
        top: 10px;
        left: 10px;
        color: yellow;
        font-family: monospace;
        font-size: 14px;
        white-space: pre;
        text-shadow: 1px 1px 1px black;
      }

      .label {
        color: #ffffff;
        font-family: sans-serif;
        padding: 2px;
        background: rgba(0, 0, 0, 0.6);
      }

      .header,
      .footer,
      .search-container {
        max-width: 100%;
        box-sizing: border-box;
      }

      * {
        box-sizing: border-box;
      }

      .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #1c023f;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-top: auto;
        z-index: 1000;
      }

      .button {
        background: rgba(107, 85, 180, 0.5);
        opacity: 0.6;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 12px;
        text-align: center;
        margin: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
        width: 30px;
        /* 设置按钮的固定宽度 */
        height: 100px;
        /* 设置按钮的固定高度 */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .button:hover {
        background: #5b4aa3;
      }

      .footer svg {
        color: white;
        font-size: 24px;
      }

      .nav-button {
        background: rgba(107, 85, 180, 0.7);
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .nav-button:hover {
        background: rgba(91, 74, 163, 0.9);
        transform: scale(1.1);
      }

      .back-btn,
      .location-btn,
      .calendar-btn,
      .moon-btn,
      .data-btn,
      .index-btn {
        margin-right: 10px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.3s;
      }

      .back-btn:hover,
      .location-btn:hover,
      .calendar-btn:hover,
      .moon-btn:hover,
      .data-btn:hover,
      .index-btn:hover {
        opacity: 0.8;
      }
    </style>
  </head>

  <body>
    <div id="info"></div>
    <div
      style="
        position: absolute;
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.6);
        padding: 15px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
      "
    >
      <div style="display: flex; flex-direction: column; gap: 5px">
        <label for="dateInput" style="color: white; font-size: 14px"
          >选择日期：</label
        >
        <input
          type="datetime-local"
          id="dateInput"
          style="
            padding: 5px;
            border-radius: 10px;
            border: 1px solid #666;
            background: rgba(255, 255, 255, 0.9);
            z-index: 1000;
            position: relative;
            pointer-events: auto;
            cursor: pointer;
          "
        />
      </div>
      <div style="display: flex; flex-direction: column; gap: 5px">
        <button
          onclick="setToday()"
          style="
            background: #2196f3;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
          "
        >
          今天
        </button>
        <button
          onclick="updateDate()"
          style="
            background: #4caf50;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
          "
        >
          确认
        </button>
      </div>
    </div>

    <script src="https://unpkg.com/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/renderers/CSS2DRenderer.js"></script>
    <script>
      // 场景初始化
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 初始化CSS2D渲染器
      const labelRenderer = new THREE.CSS2DRenderer();
      labelRenderer.setSize(window.innerWidth, window.innerHeight);
      labelRenderer.domElement.style.position = "absolute";
      labelRenderer.domElement.style.top = "0";
      document.body.appendChild(labelRenderer.domElement);

      // 设置背景色为黑色
      renderer.setClearColor(0x000000);

      // 添加轨道控制器
      const controls = new THREE.OrbitControls(
        camera,
        labelRenderer.domElement
      );
      controls.enableDamping = true;

      // 天文计算函数
      function julianDate(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();

        const a = Math.floor((14 - month) / 12);
        const y = year + 4800 - a;
        const m = month + 12 * a - 3;

        const jd =
          day +
          Math.floor((153 * m + 2) / 5) +
          365 * y +
          Math.floor(y / 4) -
          Math.floor(y / 100) +
          Math.floor(y / 400) -
          32045 +
          0.5;

        return jd;
      }

      // 计算地球和太阳位置
      function calculatePositions(date) {
        const JD = julianDate(date);
        const J2000 = 2451545.0;
        const n = JD - J2000;

        // 计算地球的黄经
        const L0 = (280.46646 + 0.98564736 * n) % 360;
        const M = (357.52911 + 0.98560028 * n) % 360;
        const M_rad = (M * Math.PI) / 180;

        // 计算地球的真实黄经
        const C =
          (1.914602 -
            0.004817 * (n / 36525) -
            0.000014 * Math.pow(n / 36525, 2)) *
            Math.sin(M_rad) +
          (0.019993 - 0.000101 * (n / 36525)) * Math.sin(2 * M_rad) +
          0.000289 * Math.sin(3 * M_rad);
        const L_E = (L0 + C) % 360;

        // 计算太阳的视黄经
        const L_S = (L_E + 180) % 360;

        return {
          earthLongitude: L_E,
          sunLongitude: L_S,
          earthX: Math.cos((L_E * Math.PI) / 180),
          earthY: Math.sin((L_E * Math.PI) / 180),
        };
      }

      
      // 创建太阳
      const textureLoader = new THREE.TextureLoader();
      const sunTexture = textureLoader.load('static/images/sun1.png');
      const sunGeometry = new THREE.SphereGeometry(0.2, 32, 32);
      const sunMaterial = new THREE.MeshBasicMaterial({ 
        map: sunTexture,
        transparent: true,
        opacity: 1.0
      });
      const sun = new THREE.Mesh(sunGeometry, sunMaterial);
      sun.position.set(0, 0, 0);  // 确保太阳在中心
      scene.add(sun);

      // 创建地球
      const earthTexture = textureLoader.load('static/images/earth.png');
      const earthGeometry = new THREE.SphereGeometry(0.1, 32, 32);
      const earthMaterial = new THREE.MeshBasicMaterial({ 
        map: earthTexture,
        transparent: true,
        opacity: 1.0
      });
      const earth = new THREE.Mesh(earthGeometry, earthMaterial);
      scene.add(earth);

      // 创建地球到太阳的虚线
      const lineMaterial = new THREE.LineDashedMaterial({
        color: 0xffffff,
        dashSize: 0.2,
        gapSize: 0.1,
      });
      const lineGeometry = new THREE.BufferGeometry();
      const linePositions = new Float32Array(6); // 两个点，每个点3个坐标
      lineGeometry.setAttribute(
        "position",
        new THREE.BufferAttribute(linePositions, 3)
      );
      const earthSunLine = new THREE.Line(lineGeometry, lineMaterial);
      earthSunLine.computeLineDistances(); // 计算虚线距离
      scene.add(earthSunLine);

            // 创建地球轨道
            const orbitGeometry = new THREE.TorusGeometry(1, 0.007, 16, 200); // 减小轨道粗细，增加分段数
      const orbitMaterial = new THREE.MeshBasicMaterial({
        color: 0x4169E1,
        transparent: true,
        opacity: 0.8,
      });
      const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
      scene.add(orbit);

      // 创建地球轨道光晕
      const orbitGlowGeometry = new THREE.TorusGeometry(1, 0.02, 16, 200);
      const orbitGlowMaterial = new THREE.MeshBasicMaterial({
        color: 0x4169E1,
        transparent: true,
        opacity: 0.2,
      });
      const orbitGlow = new THREE.Mesh(orbitGlowGeometry, orbitGlowMaterial);
      scene.add(orbitGlow);

      // 创建黄道圈
      const eclipticGeometry = new THREE.TorusGeometry(1.5, 0.007, 16, 200);
      const eclipticMaterial = new THREE.MeshBasicMaterial({
        color: 0xFFD700,
        transparent: true,
        opacity: 0.8,
      });
      const ecliptic = new THREE.Mesh(eclipticGeometry, eclipticMaterial);
      scene.add(ecliptic);

      // 创建黄道圈光晕
      const eclipticGlowGeometry = new THREE.TorusGeometry(1.5, 0.02, 16, 200);
      const eclipticGlowMaterial = new THREE.MeshBasicMaterial({
        color: 0xFFD700,
        transparent: true,
        opacity: 0.2,
      });
      const eclipticGlow = new THREE.Mesh(eclipticGlowGeometry, eclipticGlowMaterial);
      scene.add(eclipticGlow);

      // 添加黄道十二宫标记
      const zodiacNames = [
        "天秤宫",
        "天蝎宫",
        "射手宫",
        "摩羯宫",
        "水瓶宫",
        "双鱼宫",
        "白羊宫",
        "金牛宫",
        "双子宫",
        "巨蟹宫",
        "狮子宫",
        "处女宫",
      ];

      for (let i = 0; i < 12; i++) {
        const angle = (i * Math.PI) / 6;
        const x = 1.5 * Math.cos(angle);
        const y = 1.5 * Math.sin(angle);

        // 创建标记点
        const pointGeometry = new THREE.SphereGeometry(0.05, 16, 16);
        const pointMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
        const point = new THREE.Mesh(pointGeometry, pointMaterial);
        point.position.set(x, y, 0);
        scene.add(point);

        // 添加文本标签
        const div = document.createElement("div");
        div.className = "label";
        div.textContent = zodiacNames[i];

        const label = new THREE.CSS2DObject(div);
        label.position.set(x * 1.1, y * 1.1, 0);
        scene.add(label);
      }

      // 添加二分二至点
      const seasonPoints = [
        { name: "春分", angle: 0, color: 0x00ff00, glowColor: 0x66ff66 },
        { name: "夏至", angle: Math.PI / 2, color: 0xff6666, glowColor: 0xff9999 },
        { name: "秋分", angle: Math.PI, color: 0xffcc00, glowColor: 0xffeb99 },
        { name: "冬至", angle: (3 * Math.PI) / 2, color: 0x99ccff, glowColor: 0xccebff },
      ];

      seasonPoints.forEach((point) => {
        // 创建核心点 - 更大更亮
        const coreGeometry = new THREE.SphereGeometry(0.06, 32, 32);
        const coreMaterial = new THREE.MeshBasicMaterial({
          color: point.color,
          transparent: true,
          opacity: 1.0,
        });
        const core = new THREE.Mesh(coreGeometry, coreMaterial);
        core.position.set(Math.cos(point.angle), Math.sin(point.angle), 0);
        scene.add(core);

        // 创建内层光晕
        const innerGlowGeometry = new THREE.SphereGeometry(0.08, 32, 32);
        const innerGlowMaterial = new THREE.MeshBasicMaterial({
          color: point.glowColor,
          transparent: true,
          opacity: 0.6,
        });
        const innerGlow = new THREE.Mesh(innerGlowGeometry, innerGlowMaterial);
        innerGlow.position.copy(core.position);
        scene.add(innerGlow);

        // 创建中层光晕
        const middleGlowGeometry = new THREE.SphereGeometry(0.1, 32, 32);
        const middleGlowMaterial = new THREE.MeshBasicMaterial({
          color: point.glowColor,
          transparent: true,
          opacity: 0.3,
        });
        const middleGlow = new THREE.Mesh(middleGlowGeometry, middleGlowMaterial);
        middleGlow.position.copy(core.position);
        scene.add(middleGlow);

        // 创建外层光晕
        const outerGlowGeometry = new THREE.SphereGeometry(0.12, 32, 32);
        const outerGlowMaterial = new THREE.MeshBasicMaterial({
          color: point.glowColor,
          transparent: true,
          opacity: 0.1,
        });
        const outerGlow = new THREE.Mesh(outerGlowGeometry, outerGlowMaterial);
        outerGlow.position.copy(core.position);
        scene.add(outerGlow);

        // 添加标签
        const div = document.createElement("div");
        div.className = "label";
        div.textContent = point.name;
        const label = new THREE.CSS2DObject(div);
        label.position.set(
          Math.cos(point.angle) * 1.2,
          Math.sin(point.angle) * 1.2,
          0
        );
        scene.add(label);
      });
      // // 添加月份标记
      // const monthLabels = [
      //   "1月",
      //   "2月",
      //   "3月",
      //   "4月",
      //   "5月",
      //   "6月",
      //   "7月",
      //   "8月",
      //   "9月",
      //   "10月",
      //   "11月",
      //   "12月",
      // ];
      // const monthAngles = [
      //   300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270,
      // ];

      // monthAngles.forEach((angle, i) => {
      //   const radians = (angle * Math.PI) / 180;
      //   const x = 0.75 * Math.cos(radians);
      //   const y = 0.75 * Math.sin(radians);

      //   const geometry = new THREE.SphereGeometry(0.05, 16, 16);
      //   const material = new THREE.MeshBasicMaterial({
      //     color: 0x00ff00,
      //     transparent: true,
      //     opacity: 0.5,
      //   });
      //   const point = new THREE.Mesh(geometry, material);
      //   point.position.set(x, y, 0);
      //   scene.add(point);

      //   // 添加月份标签
      //   const div = document.createElement("div");
      //   div.className = "label";
      //   div.textContent = monthLabels[i];
      //   const label = new THREE.CSS2DObject(div);
      //   label.position.set(x * 1.1, y * 1.1, 0);
      //   scene.add(label);
      // });

      // 设置相机位置
      camera.position.set(0, 0, 5);
      camera.lookAt(0, 0, 0);

      // 设置日期输入框的默认值为今天
      function setToday() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, "0");
        const day = String(now.getDate()).padStart(2, "0");
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        document.getElementById(
          "dateInput"
        ).value = `${year}-${month}-${day}T${hours}:${minutes}`;
        updateDate();
      }

      // 添加日期输入框的change事件监听
      document
        .getElementById("dateInput")
        .addEventListener("change", updateDate);

      // 声明全局日期变量
      let currentDate = new Date();

      // 初始化设置今天的日期和时间
      setToday();

      // 更新日期函数
      function updateDate() {
        const dateInput = document.getElementById("dateInput");
        if (!dateInput.value) {
          alert("请选择有效的日期和时间！");
          return;
        }
        currentDate = new Date(dateInput.value);
        // 立即更新地球位置和信息显示
        const positions = calculatePositions(currentDate);
        earth.position.set(positions.earthX, positions.earthY, 0);

        // 更新地球到太阳的虚线
        const sunDirection = new THREE.Vector3(
          -positions.earthX,
          -positions.earthY,
          0
        );
        sunDirection.normalize();
        const extendedPoint = sunDirection.multiplyScalar(3);

        const linePositions = earthSunLine.geometry.attributes.position.array;
        linePositions[0] = positions.earthX;
        linePositions[1] = positions.earthY;
        linePositions[2] = 0;
        linePositions[3] = extendedPoint.x;
        linePositions[4] = extendedPoint.y;
        linePositions[5] = 0;
        earthSunLine.geometry.attributes.position.needsUpdate = true;
        earthSunLine.computeLineDistances();

        // 计算太阳所在星座
        const zodiacIndex = Math.floor(positions.sunLongitude / 30);
        const currentZodiac = zodiacNames[zodiacIndex];

        // 更新信息显示
        const info = document.getElementById("info");
        info.textContent = `观测日期: ${currentDate.toLocaleDateString()}
地球的黄经: ${positions.earthLongitude.toFixed(2)}°
太阳的视黄经: ${positions.sunLongitude.toFixed(2)}°
太阳位于: ${currentZodiac}`;
      }

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);

        // 更新地球位置
        const positions = calculatePositions(currentDate);
        earth.position.set(positions.earthX, positions.earthY, 0);

        // 更新地球到太阳的虚线
        const sunDirection = new THREE.Vector3(
          -positions.earthX,
          -positions.earthY,
          0
        );
        sunDirection.normalize();
        const extendedPoint = sunDirection.multiplyScalar(3);

        const linePositions = earthSunLine.geometry.attributes.position.array;
        linePositions[0] = positions.earthX;
        linePositions[1] = positions.earthY;
        linePositions[2] = 0;
        linePositions[3] = extendedPoint.x;
        linePositions[4] = extendedPoint.y;
        linePositions[5] = 0;
        earthSunLine.geometry.attributes.position.needsUpdate = true;
        earthSunLine.computeLineDistances();

        // 计算太阳所在星座
        const zodiacIndex = Math.floor(positions.sunLongitude / 30);
        const currentZodiac = zodiacNames[zodiacIndex];

        // 更新信息显示
        const info = document.getElementById("info");
        info.textContent = `观测日期: ${currentDate.toLocaleDateString()}
地球的黄经: ${positions.earthLongitude.toFixed(2)}°
太阳的视黄经: ${positions.sunLongitude.toFixed(2)}°
太阳位于: ${currentZodiac}`;

        controls.update();
        renderer.render(scene, camera);
        labelRenderer.render(scene, camera);
      }

      // 窗口大小调整
      window.addEventListener("resize", onWindowResize, false);

      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        labelRenderer.setSize(window.innerWidth, window.innerHeight);
      }

      animate();
    </script>
    <div
      id="sliderContainer"
      style="
        position: fixed;
        bottom: 150px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        padding: 5px;
        height: 50px;
        border-radius: 25px;
        touch-action: pan-x;
        min-width: 160px;
      "
    >
      <button class="nav-button" style="margin-right: 2px">
        <img
          src="{{ url_for('static', filename='素材/left.png') }}"
          alt="left"
          style="width: 28px; height: 28px"
        />
      </button>
      <button class="nav-button" onclick="window.location.href='moon.html'">
        <img
          src="{{ url_for('static', filename='素材/right.png') }}"
          alt="right"
          style="width: 28px; height: 28px"
        />
      </button>
    </div>

    <style>
      .nav-button {
        background: rgba(107, 85, 180, 0.2);
        border: none;
        border-radius: 20px;
        padding: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 80px;
      }

      .nav-button:first-child {
        background: rgba(107, 85, 180, 0.9);
      }
      .nav-button:hover {
        background: rgba(91, 74, 163, 0.9);
        transform: scale(1.1);
      }

      #sliderContainer {
        background: rgba(107, 85, 180, 0.5);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
      }
    </style>

    <script>
      const sliderContainer = document.getElementById("sliderContainer");
      let startX = 0;
      let isDragging = false;

      sliderContainer.addEventListener("touchstart", (e) => {
        startX = e.touches[0].clientX;
        isDragging = true;
      });

      sliderContainer.addEventListener("touchmove", (e) => {
        if (!isDragging) return;
        e.preventDefault();
      });

      sliderContainer.addEventListener("touchend", (e) => {
        if (!isDragging) return;

        const endX = e.changedTouches[0].clientX;
        const diffX = endX - startX;

        // 只处理向左滑动的情况（切换到右侧页面）
        if (diffX < -50) {
          // 向左滑动超过50px
          window.location.href = "moon.html";
        }

        isDragging = false;
      });
    </script>

    <div class="footer">
      <button
        class="calendar-btn"
        onclick="window.location.href='newcalendar.html'"
      >
        <img
          src="{{ url_for('static', filename='素材/日历浅色.png') }}"
          alt="calendar"
        />
      </button>
      <button class="moon-btn" onclick="window.location.href='moon.html'">
        <img
          src="{{ url_for('static', filename='素材/可视化深色.png') }}"
          alt="moon"
        />
      </button>
      <button class="data-btn" onclick="window.location.href='newdata.html'">
        <img
          src="{{ url_for('static', filename='素材/知识浅色.png') }}"
          alt="data"
        />
      </button>
      <button class="index-btn" onclick="window.location.href='newai.html'">
        <img
          src="{{ url_for('static', filename='素材/大模型.png') }}"
          alt="index"
        />
      </button>
    </div>
  </body>
</html>
